<html>
<head>
<title>Scripts</title>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/colorbox/jquery.colorbox-min.js"></script>

<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/js/colorbox/colorbox.css" />

<style type="text/css">
table.dataTable {
  border-collapse: collapse;
}
table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td {
  padding: .3em;
  border: 1px #ccc solid;
}
table.dataTable > thead {
  background-color: #ccf;
}

img.scriptDelete { cursor: pointer; }
span.newScript { cursor: pointer; }
</style>
        
<script type="text/javascript">
$(document).ready(function() {
    reloadScripts();
    $('span.newScript').click(function() {
        $.colorbox(
            {
                href: 'editscript.html',
                iframe: true,
                width: "80%",
                height: "80%",
                overlayClose: false,
                escKey: false,
                onLoad: function() { $('#cboxClose').remove(); }
            }
        );
    });
});

function reloadScripts()
{
    $.ajax({
        url: "/json/script/list",
        dataType: "json",
        success: function(data) {
            var tbody = $('#installedScripts > tbody');

            $(tbody).empty();
            for (i = 0; i < data.scripts.length; i++) {
                var script = data.scripts[i];
                var row = $('<tr></tr>');

                $(row).append($('<td style="display: none;">' + script.id + '</td>'));
                $(row).append($('<td>' + script.name + '</td>'));
                $(row).append($('<td>' + script.status + '</td>'));
                $(row).append($('<td>' + script.state + '</td>'));
                $(row).append($('<td>' + script.size + '</td>'));
                $(row).append($('<td align="center"><a class="scriptEdit" href="editscript.html?scriptid=' + script.id + '"><img src="images/pencil_48.png" width="24" /></a></td>'));
                $(row).append($('<td align="center"><img class="scriptDelete" src="images/delete_48.png" width="24" /></td>'));

                $(tbody).append(row);
            }

            installScriptEvents();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert('Could not load data: ' + thrownError);
        }
    });
}

function deleteScript(scriptId)
{
    $.ajax({
        url: "/json/script/" + scriptId,
        type: "DELETE",
        success: function(data) {
            reloadScripts();
        },
        error: function() {
            alert('Could not delete script.');
        }
    });
}

function installScriptEvents()
{
    $('a.scriptEdit').colorbox(
        {
            iframe: true,
            width: "80%",
            height: "80%",
            overlayClose: false,
            escKey: false,
            onLoad: function() { $('#cboxClose').remove(); }
        });

    $('img.scriptDelete').click(function() {
        var row = $(this).parent().parent().children();
        var scriptId = $(row[0]).text();
        var scriptName = $(row[1]).text();
        
        var result = confirm('Are you sure you wish to delete the script \'' + scriptName + '\'?');
        if (result == true) {
            deleteScript(scriptId);
        }
    });
}
</script>

</head>

<body>
    <div class="pageHeader">Installed Scripts</div>
    <div class="pageContent">
        <table id="installedScripts" class="dataTable" style="width: 70%; margin-left: auto; margin-right: auto;">
            <thead>
                <tr>
                    <th style="display: none;">ID</th>
                    <th>Name</th>
                    <th style="width: 95px;">Status</th>
                    <th style="width: 95px;">State</th>
                    <th style="width: 80px;">Size</th>
                    <th style="width: 55px;">Edit</th>
                    <th style="width: 55px;">Delete</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
	<div style="width: 70%; margin-left: auto; margin-right: auto; margin-top: 10px; text-align: right;">
            <span class="newScript"><img style="margin-right: 3px;" src="images/add_48.png" width="16" /><span style="display: inline-block;">New Script</span></span>
        </div>
    </div>
</body>

</html>
